<style>

	.explain{

		width:100%;

		height:70px;

	}

	.explain ul{

		list-style: none outside none;

	}

	.explain ul li{

		float:left;

		padding-left: 10px;

	}

	.explain .square{

		width: 20px;

		min-width:20px;

		height:20px;

		float:left;

		margin-right:5px;

	}

</style>

<!-- BEGIN PAGE CONTAINER-->

         <div class="container-fluid">

            <!-- BEGIN PAGE HEADER-->   

            <div class="row-fluid">

               <div class="span12">

                   <!-- BEGIN THEME CUSTOMIZER-->

                   <div id="theme-change" class="hidden-phone">

                       <i class="icon-cogs"></i>

                        <span class="settings">

                            <span class="text">Theme Color:</span>

                            <span class="colors">

                                <span class="color-default" data-style="default"></span>

                                <span class="color-green" data-style="green"></span>

                                <span class="color-gray" data-style="gray"></span>

                                <span class="color-purple" data-style="purple"></span>

                                <span class="color-red" data-style="red"></span>

                            </span>

                        </span>

                   </div>

                   <!-- END THEME CUSTOMIZER-->

                  <!-- BEGIN PAGE TITLE & BREADCRUMB-->

                   <h3 class="page-title">

                     {$data.nameact}

                   </h3>

                   <!-- END PAGE TITLE & BREADCRUMB-->

               </div>

            </div>

            <!-- END PAGE HEADER-->

            <!-- BEGIN PAGE CONTENT-->

            <div class="row-fluid">

                <!--BEGIN METRO STATES-->

                <div class="metro-nav">

                    <div class="metro-nav-block nav-block-orange">

                        <a data-original-title="" href="#">

                            <i class="icon-file-text-alt"></i>

                            <div class="info">{$data.post}</div>

                            <div class="status">Bài viết trong ngày</div>

                        </a>

                    </div>

                    <div class="metro-nav-block nav-block-grey" style="display:none;">

                        <a data-original-title="" href="#">

                            <i class="icon-comments-alt"></i>

                            <div class="info">49</div>

                            <div class="status">Số nhận xét trong ngày</div>

                        </a>

                    </div>

                    <div class="metro-nav-block nav-block-blue double">

                        <a data-original-title="" href="#">

                            <i class="icon-eye-open"></i>

                            <div class="info">{$data.view}</div>

                            <div class="status">Lượt truy cập trong ngày</div>

                        </a>

                    </div>

                    <div class="metro-nav-block nav-block-red">

                        <a data-original-title="" href="#">

                            <i class="icon-bar-chart"></i>

                            <div class="info">{$data.cat[0].name}</div>

                            <div class="status">Chủ đề HOT</div>

                        </a>

                    </div>

					                    <div class="metro-nav-block nav-block-orange" style="display:none;">

                        <a data-original-title="" href="#">

                            <i class="icon-envelope"></i>

                            <div class="info">123</div>

                            <div class="status">Phản hồi</div>

                        </a>

                    </div>

                </div>

                <div class="space10"></div>

                <!--END METRO STATES-->

            </div>

            <div class="row-fluid">

                <div class="span6">

                    <!-- BEGIN CHART PORTLET-->

                    <div class="widget ">

                        <div class="widget-title">

                            <h4><i class="icon-reorder"></i> Số lượng bài viết theo chủ đề</h4>

                            <span class="tools">

                                <a href="javascript:;" class="icon-chevron-down"></a>

                                <a href="javascript:;" class="icon-remove"></a>

                            </span>

                        </div>

                        <div class="widget-body">

                            <div class="text-center">

							<script>

							    var doughnutData = [];

								{foreach from=$data.cat item=dough}

								doughnutData.push({

										value: {$dough.nums},

										color:"{$dough.color}"

									});

								{/foreach}

									var lineChartData = {

										labels : ["00","02","04","06","08","10","12","14","16","18","20","22","24"],

										datasets : [

										{

											fillColor : "rgba(151,187,205,0.5)",

											strokeColor : "rgba(151,187,205,1)",

											pointColor : "rgba(151,187,205,1)",

											pointStrokeColor : "#fff",

											data : [{$data.view_h.0}]

										}

										]

									};

							</script>

                                <canvas id="doughnut" height="300" width="400"></canvas>

								<div class="explain">

									<ul>

										{foreach from=$data.cat item=dough}

										<li><div class="square" style="background:{$dough.color};" ></div> {$dough.name}</li>

										{/foreach}

									</ul>

								</div>

                            </div>

                        </div>

                    </div>

                    <!-- END CHART PORTLET-->

                </div>

                <div class="span6">

                    <!-- BEGIN CHART PORTLET-->

                    <div class="widget green">

                        <div class="widget-title">

                            <h4><i class="icon-reorder"> </i> Thời gian truy cập trong ngày</h4>

                            <span class="tools">

                                <a href="javascript:;" class="icon-chevron-down"></a>

                                <a href="javascript:;" class="icon-remove"></a>

                            </span>

                        </div>

                        <div class="widget-body">

                            <div class="text-center">

                                <canvas id="line" height="300" width="450"></canvas>

                            </div>

							<div class="explain">

									<ul>

										<li><b>Nhiều nhất:</b> {$data.view_h.max} khách</li>

										<li><b>Ít nhất:</b> {$data.view_h.min} khách</li>

										<li><b>Bình quân:</b> {$data.view_h.avg} khách</li>

									</ul>

								</div>

                        </div>

                    </div>

                    <!-- END CHART PORTLET-->

                </div>

            </div>
            <!-- END PAGE CONTENT-->         

         </div>

         <!-- END PAGE CONTAINER-->